<template>
  <div>
    <h4>基本信息</h4>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="text-align: left">
      <el-form-item label="角色名称" style="font-weight: bolder">
        <el-input v-model="searchForm.name" placeholder="请输入用户名称" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getSearchForm" size="mini" icon="el-icon-search">查询</el-button>
      </el-form-item>
    </el-form>
    <h4>角色信息</h4>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="用户编号">
      </el-table-column>

      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>

      <el-table-column
          prop="description"
          label="详情">
      </el-table-column>

      <el-table-column
          prop="createdAt"
          label="创建时间">
      </el-table-column>

      <el-table-column
          prop="updatedAt"
          label="修改时间">
      </el-table-column>

      <el-table-column
          label="操作"
          align="center"
          width="260"
          class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">


          <el-button
              size="mini"
              type="text"
              icon="el-icon-s-custom"
              @click="handleRoles(scope.row)"
          >分配菜单
          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageNum"
        :page-sizes="[3,4,30,40]"
        :page-size="searchForm.pageSize"
        :page-count="searchForm.pages"
        layout=" sizes, prev, pager, next, jumper"
    >
    </el-pagination>

    <el-dialog
        title="分配菜单"
        :visible.sync="dialogRole"
        width="30%"
    >

      <el-tree
          :ref="checkedIds"
          :data="treeData"
          :show-checkbox="true"
          node-key="id"
          :default-expand-all="true"
          @check="click"
          :default-checked-keys="defaultCheckIds"
          :props="defaultProps">
      </el-tree>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogRole = false">取 消</el-button>
    <el-button type="primary" @click="fenRoles">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>


import {
  search,
  getRoles,
  getRoleIds,
  fenRole
} from "@/api/roles";

export default {
  name: "RolesView",
  data() {
    return {
      rolesId: '',
      dialogRole: false,
      searchForm: {
        name: '',
        pageNum: 1,
        pageSize: 3,
        total: 0,
        pages: 1
      },
      tableData: [],
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      checkedIds: '',
      defaultCheckIds: [],
      checkedTree: []
    };
  },
  created() {
    this.getPage()

  },
  methods: {
    fenRoles() {
      let that = this
      fenRole(that.rolesId,that.checkedTree).then(function (data) {
        if (data.code == 200) {
          that.$message.success(data.mess)
        } else {
          that.$message.error(data.mess)
        }
        that.dialogRole = false
      })
    },
    handleRoles(row) {
      let that = this
      that.rolesId = row.id
      that.dialogRole = true
      getRoles().then(function (data) {
        if (data.code == 200) {
          that.treeData = data.data
          that.defaultCheckIds = []
          getRoleIds(row.id).then(function (data) {
            that.defaultCheckIds = data.data
            that.checkedTree = data.data
          })
        }

      })
    },

    click(one, two) {
      let all = two.checkedKeys;
      let ban = two.halfCheckedKeys;
      if (ban.length != 0) {
        for (let i = 0; i < ban.length; i++) {
          all.push(ban[i])
        }
      }
      this.checkedTree = all
    },

    handleSizeChange(size) {
      let that = this
      that.searchForm.pageSize = size
      that.getPage()
    },
    handleCurrentChange(num) {
      let that = this
      that.searchForm.pageNum = num
      that.getPage()
    },
    getSearchForm() {
      this.searchForm.pageNum = 1
      this.getPage()
    },

    getPage() {
      let that = this
      search(that.searchForm).then(function (data) {

        if (data.code == 200) {
          that.tableData = data.data.records
          that.searchForm.pages = data.data.pages
          that.searchForm.total = data.data.total
          that.searchForm.pageSize = data.data.size
          that.searchForm.pageNum = data.data.current
        }
      })
    },

  }
};
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
